import * as echarts from "echarts";

export const baroption = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "4%",
    right: "0%",
    bottom: "7%",
    top: "3%",
    containLabel: true,
  },
  legend: {
    data: ["达标率情况"],
    left: "7%",
    top: "9%",
    show: false,
    textStyle: {
      color: "#fff",
    },
  },
  xAxis: {
    type: "category",
    data: [],
    axisLine: {
      lineStyle: {
        color: "#cdd5e2",
      },
    },
    axisLabel: {
      textStyle: {
        color: "#fff",
      },
    },
  },

  yAxis: [
    {
      type: "value",
      axisLine: {
        show: false,
        lineStyle: {
          color: "#cdd5e2",
        },
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#cdd5e2",
        },
      },
    },
  ],
  series: [
    {
      name: "",
      type: "bar",
      barWidth: "12px",
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#29acff",
            },
            {
              offset: 1,
              color: "#4bdfff",
            },
          ]),
          barBorderRadius: 6,
        },
      },
      data: [],
    },
  ],
};

export const pieoption = {
  animation: true,
  title: {
    text: "",
    subtext: "",
    x: "center",
    y: "center",
    textStyle: {
      color: "#fff",
      fontSize: 16,
      fontWeight: "normal",
      align: "center",
      width: "200px",
    },
    subtextStyle: {
      color: "#fff",
      fontSize: 14,
      fontWeight: "normal",
      align: "center",
    },
  },
  legend: {
    width: "70%",
    left: "center",
    textStyle: {
      color: "#fff",
      fontSize: 14,
    },
    icon: "circle",
    right: "0",
    bottom: "0",
    padding: [15, 10],
    itemGap: 10,
    data: [],
  },
  series: [
    {
      type: "pie",
      center: ["50%", "50%"],
      radius: ["40%", "53%"],
      color: [
        "#FEE449",
        "#00FFFF",
        "#00FFA8",
        "#9F17FF",
        "#FFE400",
        "#F76F01",
        "#01A4F7",
        "#FE2C8A",
      ],
      startAngle: 75,
      labelLine: {
        normal: {
          length: 12,
        },
      },
      label: {
        normal: {
          formatter: "{b|{b}:}  {per|{d}%} ",
          backgroundColor: "rgba(255, 147, 38, 0)",
          borderColor: "transparent",
          borderRadius: 4,
          rich: {
            a: {
              color: "#999",
              lineHeight: 18,
              align: "center",
            },
            hr: {
              borderColor: "#aaa",
              width: "100%",
              borderWidth: 1,
              height: 0,
            },
            b: {
              color: "#b3e5ff",
              fontSize: 14,
              lineHeight: 33,
            },
            c: {
              fontSize: 14,
              color: "#eee",
            },
            per: {
              color: "#FDF44E",
              fontSize: 14,
              padding: [5, 8],
              borderRadius: 2,
            },
          },
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
      },
      emphasis: {
        label: {
          show: true,
          formatter: "{b|{b}:}  {per|{d}%}  ",
          backgroundColor: "rgba(255, 147, 38, 0)",
          borderColor: "transparent",
          borderRadius: 4,
          rich: {
            a: {
              color: "#999",
              lineHeight: 22,
              align: "center",
            },
            hr: {
              borderColor: "#aaa",
              width: "100%",
              borderWidth: 1,
              height: 0,
            },
            b: {
              color: "#fff",
              fontSize: 18,
              lineHeight: 33,
            },
            c: {
              fontSize: 14,
              color: "#eee",
            },
            per: {
              color: "#FDF44E",
              fontSize: 25,
              padding: [5, 6],
              borderRadius: 2,
            },
          },
        },
      },
      data: [
        {
          name: "测量工",
          value: 3,
        },
        {
          name: "电焊工",
          value: 2,
        },
        {
          name: "钢筋工",
          value: 26,
        },
        {
          name: "沥青工",
          value: 24,
        },
        {
          name: "安装工",
          value: 12,
        },
        {
          name: "起重工",
          value: 11,
        },
        {
          name: "养护工",
          value: 3,
        },
        {
          name: "其它",
          value: 2,
        },
      ],
    },
    {
      type: "pie",
      center: ["50%", "50%"],
      radius: ["35%", "36%"],
      label: {
        show: false,
      },
      data: [
        {
          value: 78,
          name: "",
          itemStyle: {
            normal: {
              color: {
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "#9F17FF",
                  },
                  {
                    offset: 0.2,
                    color: "#01A4F7",
                  },
                  {
                    offset: 0.5,
                    color: "#FE2C8A",
                  },
                  {
                    offset: 0.8,
                    color: "#FEE449",
                  },
                  {
                    offset: 1,
                    color: "#00FFA8",
                  },
                ],
              },
            },
          },
        },
      ],
    },
  ],
};

export const maxpieoption = {
  title: {
    text: "",
    subtext: "",
    left: "center",
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    textStyle: {
      color: "#fff",
      fontSize: 14,
    },
    left: "center",
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: "65%",
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
      label: {
        position: "inside",
      },
    },
  ],
};
